<template>
  <div style="width: 100%; height: 500px; background-color: #fff">
    <el-form
      :inline="true"
      :model="page"
      label-width="auto"
      style="max-width: 1200px"
    >
      <el-form-item style="margin: 20px 20px 20px 700px">
        <el-input
          placeholder="请输入部门名称"
          v-model="page.departmentName"
          style="width: 200px"
        />
      </el-form-item>
      <el-button
        type="info"
        style="float: right; margin: 20px 0px 20px 20px"
        @click="GetData"
        :icon="Search"
        >查询</el-button
      >
      <el-button
        type="success"
        style="float: right; margin: 20px 20px 20px 20px"
        @click="dialogFormVisible = true"
        :icon="Edit"
        >新增</el-button
      >
    </el-form>

    <el-table :data="tableData" style="width: 100%;height: 160px;">
      <el-table-column prop="departmentId" label="序号" />
      <el-table-column prop="nodeEncoding" label="部门编码" />
      <el-table-column prop="departmentName" label="部门名称" />
      <el-table-column prop="departmentStatus" label="状态">
        <template #default="{ row }">
          <el-text v-if="row.departmentStatus == 0" type="success"
            >启用</el-text
          >
          <el-text v-else type="danger">停用</el-text>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        v-model:current-page="page.pageIndex"
        v-model:page-size="page.pageSize"
        layout="prev, pager, next"
        :total="page.totalCount"
        class="mt-4"
        @current-change="handleCurrentChange"
        style="float: right"
      />
      <span style="float: right; margin-top: 4px"
        >共{{ page.totalCount }}条</span
      >
    </div>

    <!-- 新增部门 -->
    <el-dialog v-model="dialogFormVisible" title="部门新增" width="500">
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="部门编码" prop="nodeEncoding">
          <el-input v-model="ruleForm.nodeEncoding" />
        </el-form-item>
        <el-form-item label="部门名称" prop="departmentName">
          <el-input v-model="ruleForm.departmentName" />
        </el-form-item>
        <el-form-item label="所属企业" prop="enterpriseId">
          <el-select v-model="ruleForm.enterpriseId" placeholder="请选择企业">
            <el-option
              v-for="item in enterpriseList"
              :label="item.enterpriseName"
              :value="item.enterpriseId"
              :key="item.enterpriseId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="departmentStatus">
          <el-radio-group v-model="ruleForm.departmentStatus">
            <el-radio :value="false">启用</el-radio>
            <el-radio :value="true">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="Add"> 添加 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
const dialogFormVisible = ref(false);
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import axios from "axios";
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { ru } from "element-plus/es/locales.mjs";
const apiurl = import.meta.env.VITE_APP_API_URL_EnterpriseShow;
const apiurl2 = import.meta.env.VITE_APP_API_URL_EnterpriseAdd;
interface RuleForm {
  departmentId: number;
  departmentStatus: boolean;
  nodeEncoding: string;
  departmentName: string;
  enterpriseId: string;
  pId: number;
  isDelete: boolean;
}

const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  departmentId: 0,
  departmentStatus: false,
  nodeEncoding: "",
  departmentName: "",
  enterpriseId: "",
  pId: 0,
  isDelete: false,
});
const page = reactive({
  departmentName: "",
  pageIndex: 1,
  pageSize: 3,
  totalCount: 0,
  totalPage: 0,
});

//定义一个数组 存储企业信息
const tableData = ref([]);
//企业信息显示查询分页
const GetData = () => {
  axios
    .post(apiurl + "/api/Basis/QueryDepartment", {
      departmentName: page.departmentName,
      pageIndex: page.pageIndex,
      pageSize: page.pageSize,
    })
    .then((res) => {
      console.log(res);
      tableData.value = res.data.data.list;
      page.totalCount = res.data.data.totalCount;
      page.totalPage = res.data.data.totalPage;
    })
    .catch((err) => {
      console.log(err);
    });
};
//钩子函数
onMounted(() => {
  GetData();
  getEnterpriseList();
});


const handleCurrentChange = (val: number) => {
  page.pageIndex = val;
  GetData();
};

//表单验证
const rules = reactive<FormRules<RuleForm>>({
  nodeEncoding: [
    { required: true, message: "请输入部门编码", trigger: "blur" },
  ],
  departmentName: [
    { required: true, message: "请输入部门名称", trigger: "blur" },
  ],
  enterpriseId: [{ required: true, message: "请选择企业", trigger: "blur" }],
});
//新增
const Add = () => {
  axios.post(apiurl2 + "/api/Basic/AddDepartment", {
    departmentStatus: ruleForm.departmentStatus,
    nodeEncoding: ruleForm.nodeEncoding,
    enterpriseId: ruleForm.enterpriseId,
    pId: ruleForm.pId,
    isDelete: ruleForm.isDelete,
    departmentName:ruleForm.departmentName,
  }).then((res) => {
    console.log(res);
    ElMessage.success("添加成功");
    dialogFormVisible.value = false;
    GetData();
  });
};
//企业显示
const enterpriseList: any = ref([]);
const getEnterpriseList = () => {
  axios
    .post(apiurl + "/api/Basis/ShowEnterprise", {})
    .then((res) => {
      console.log(res);
      enterpriseList.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>
